<template>
    <customNavigationBar title="修改密码" />

    <view class="title">账号密码修改</view>

    <view class="inputs">
        <view class="item">
            <view class="itemTitle">旧密码</view>

            <view class="inputBox">
                <input v-if="PSD.oldPSD.show" type="text" :maxlength="12" v-model.trim="PSD.oldPSD.value" placeholder="6-12位字母数字组合" />
                <input v-else type="password" :maxlength="12" v-model.trim="PSD.oldPSD.value" placeholder="6-12位字母数字组合" />

                <view class="showIcon" @click="PSD.oldPSD.show = !PSD.oldPSD.show">
                    <image v-if="PSD.oldPSD.show" src="/static/common/icon_show.png"></image>
                    <image v-else src="/static/common/icon_display.png"></image>
                </view>
            </view>
        </view>
        <view class="item">
            <view class="itemTitle">新密码</view>
            <view class="inputBox">
                <input v-if="PSD.newPSD.show" type="text" :maxlength="12" v-model.trim="PSD.newPSD.value" placeholder="6-12位字母数字组合" />
                <input v-else type="password" :maxlength="12" v-model.trim="PSD.newPSD.value" placeholder="6-12位字母数字组合" />
                <view class="showIcon" @click="PSD.newPSD.show = !PSD.newPSD.show">
                    <image v-if="PSD.newPSD.show" src="/static/common/icon_show.png"></image>
                    <image v-else src="/static/common/icon_display.png"></image>
                </view>
            </view>
        </view>
        <view class="item">
            <view class="itemTitle">再次输入</view>
            <view class="inputBox">
                <input v-if="PSD.newPSD2.show" type="text" :maxlength="12" v-model.trim="PSD.newPSD2.value" placeholder="6-12位字母数字组合" />
                <input v-else type="password" :maxlength="12" v-model.trim="PSD.newPSD2.value" placeholder="6-12位字母数字组合" />

                <view class="showIcon" @click="PSD.newPSD2.show = !PSD.newPSD2.show">
                    <image v-if="PSD.newPSD2.show" src="/static/common/icon_show.png"></image>
                    <image v-else src="/static/common/icon_display.png"></image>
                </view>
            </view>
        </view>

        <view class="submitButton" :class="canSubmit && 'active'" @click="SubmitEvent">确定</view>
    </view>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue';

import { checkStrLengthIsNotZero as checkStr } from '@/utils/utils';
import { userApis } from '../../utils/apis';

let PSD = reactive({
    oldPSD: {
        value: '',
        show: false
    },
    newPSD: {
        value: '',
        show: false
    },
    newPSD2: {
        value: '',
        show: false
    }
});

const canSubmit = computed(() => {
    return checkStr(PSD.newPSD.value) && checkStr(PSD.oldPSD.value) && checkStr(PSD.newPSD2.value);
});

const SubmitEvent = async () => {
    if (!canSubmit.value) return;
    if (PSD.oldPSD.value.length < 6) {
        uni.showModal({
            showCancel: false,
            title: '旧密码位数小于六位数'
        });
        return;
    }
    if (PSD.newPSD.value.length < 6) {
        uni.showModal({
            showCancel: false,
            title: '新密码位数小于六位数'
        });
        return;
    }
    if (PSD.newPSD2.value != PSD.newPSD.value) {
        uni.showModal({
            showCancel: false,
            title: '输入的新密码不一致'
        });
        return;
    }

    const regex = /^(?=.*[A-Za-z])[A-Za-z\d]+$/;
    if (!regex.test(PSD.newPSD.value)) {
        uni.showModal({
            showCancel: false,
            title: '密码需要至少包含一位字母'
        });
        return;
    }

    await userApis.editPassword({
        id: uni.getStorageSync('userId'),
        password: PSD.oldPSD.value,
        newpassword1: PSD.newPSD.value
    });

    uni.showToast({
        icon: 'none',
        title: '密码修改成功,即将跳转重新登录',
        mask: true
    });

    uni.clearStorageSync();

    setTimeout(() => {
        uni.redirectTo({
            url: '/pages_user/Login_Register/Login_Register?isLogin=true'
        });
    }, 1000);
};
</script>

<style lang="scss" scoped>
.title {
    margin-top: 90rpx;
    margin-bottom: 90rpx;
    font-size: 44rpx;
    color: #333333;
    text-align: center;
}

.inputs {
    padding: 0 100rpx;
    .item {
        width: 100%;
        margin-bottom: 28rpx;
        display: flex;
        align-items: center;
        gap: 36rpx;
        .itemTitle {
            font-size: 26rpx;
            color: #333333;
            width: 110rpx;
            height: 66rpx;
            line-height: 66rpx;
        }
        .inputBox {
            flex: 1;
            height: 66rpx;
            border-bottom: 2rpx solid #e4e4e6;
            display: flex;
            align-items: center;
            input {
                flex: 1;
                height: 40rpx;
                font-size: 28rpx;
                color: #333333;
                &::placeholder {
                    color: #999;
                }
            }
            .showIcon {
                height: 40rpx;
                width: 40rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                image {
                    width: 32rpx;
                    height: 32rpx;
                }
            }
        }
    }

    .submitButton {
        width: 100%;
        height: 92rpx;
        background: #e4e4e6;
        border-radius: 16rpx;
        font-size: 26rpx;
        color: #333333;
        line-height: 92rpx;
        text-align: center;
        margin: 0 auto;
        margin-top: 120rpx;
        &.active {
            background: #2c72ff;
            color: #fff;
        }
    }
}
</style>
